<template>
  <div class="content-card">
    <div class="item">
      <span class="label">{{ "目录总量" }}</span>
      <div class="value">
        <img src="@/assets/img/overview/1-1.jpg" alt="1-1" />
        <span>{{ v1 }}</span>
      </div>
    </div>
    <div class="item">
      <span class="label">{{ "资源总量" }}</span>
      <div class="value">
        <img src="@/assets/img/overview/1-2.jpg" alt="1-2" />
        <span>{{ v2 }}</span>
      </div>
    </div>
    <div class="item">
      <span class="label">{{ "服务总量" }}</span>
      <div class="value">
        <img src="@/assets/img/overview/1-3.jpg" alt="1-3" />
        <span>{{ v3 }}</span>
      </div>
    </div>
    <div class="item">
      <span class="label">{{ "上级省级目录数" }}</span>
      <div class="value">
        <img src="@/assets/img/overview/1-4.jpg" alt="1-4" />
        <span>{{ v4 }}</span>
      </div>
    </div>
    <div class="item">
      <span class="label">{{ "上级省级资源数" }}</span>
      <div class="value">
        <img src="@/assets/img/overview/1-5.jpg" alt="1-5" />
        <span>{{ v5 }}</span>
      </div>
    </div>
    <div class="item">
      <span class="label">{{ "订阅资源总数" }}</span>
      <div class="value">
        <img src="@/assets/img/overview/1-6.jpg" alt="1-6" />
        <span>{{ v6 }}</span>
      </div>
    </div>
  </div>
</template>

<script>
import API from "@/api/overview";
export default {
  name: "o1-box",

  data() {
    return {
      timer: null,
      v1: 0,
      v2: 0,
      v3: 0,
      v4: 0,
      v5: 0,
      v6: 0,
    };
  },
  methods: {
    getBoxData() {
      let handleV1 = (res) => (this.v1 = res.data.body.data[0].mlzl);
      let handleV2 = (res) => (this.v2 = res.data.body.data[0].zyzl);
      let handleV3 = (res) => (this.v3 = res.data.body.data[0].fwzl,console.log(this.v3));
      let handleV4 = (res) => (this.v4 = res.data.body.data[0].sbsjmlzl);
      let handleV5 = (res) => (this.v5 = res.data.body.data[0].sjsjzys);
      let handleV6 = (res) => (this.v6 = res.data.body.data[0].dyzl);
      API.getBox1_v1().then(handleV1);
      API.getBox1_v2().then(handleV2);
      API.getBox1_v3().then(handleV3);
      API.getBox1_v4().then(handleV4);
      API.getBox1_v5().then(handleV5);
      API.getBox1_v6().then(handleV6);
    },
    getTask() {
      return () => {
        this.getBoxData();
      };
    },
  },
  mounted() {
    this.getTask()(); // 先执行 一次任务
    this.timer = setInterval(this.getTask(), 30000); // 设置周期触发任务
  },
  beforeDestroy() {
    clearInterval(this.timer);
    this.timer = null;
  },
};
</script>

<style lang="less" scoped>
.content-card {
  width: 100%;
  height: 220px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  padding: 10px 5px;
  .item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    .label {
      font-size: 14px;
      margin-bottom: 10px;
    }
    .value {
      display: flex;
      justify-content: center;
      img {
        margin: 0 6px;
        width: 28px;
        height: 28px;
      }
      span {
        font-family: ReductoCondensedSSiCondensed, sans-serif;
        font-size: 20px;
        font-weight: 500;
      }
    }
    &:nth-child(1) {
      .value span {
        color: #00df91;
      }
    }
    &:nth-child(2) {
      border-left: 1px dashed #eee;
      .value span {
        color: #faae62;
      }
    }
    &:nth-child(3) {
      border-left: 1px dashed #eee;
      .value span {
        color: #3695ff;
      }
    }
    &:nth-child(4) {
      border-top: 1px solid #eee;
      .value span {
        color: #00df91;
      }
    }
    &:nth-child(5) {
      border-top: 1px solid #eee;
      border-left: 1px dashed #eee;
      .value span {
        color: #faae62;
      }
    }
    &:nth-child(6) {
      border-top: 1px solid #eee;
      border-left: 1px dashed #eee;
      .value span {
        color: #3695ff;
      }
    }
  }
}
</style>
